<template>
    <div class="page page-my">
        <!-- 如果有user info 说明已经登录 -->
        <!-- <h1>个人中心</h1>
        <div v-if="userinfo">
            个人信息: {{userinfo.nickname}}
            <button @click="logout">退出登录</button>
        </div>
        <div v-else>
            <router-link to="/login">立即登录</router-link>
        </div> -->
        <div class="header">
            <img src="../assets/my/shezhi.png" mode="" class="setting-btn" />
            <div class="uni-flex uni-row" style="align-items: center;">
                <div class="img-profile">
                    <img :src="user.profile" mode="" />
                </div>
                <div>
                    <div class="nikename">
                        {{ user.nickname }}
                        <div class="usertag">{{ user.level }}</div>
                    </div>
                    <div class="uni-flex uni-row">
                        <div
                            class="usertag"
                            v-for="(tag, i) in user.tags"
                            :key="i"
                        >
                            {{ tag }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-item">
            <van-grid :column-num="5">
                <van-grid-item
                    v-for="(o, i) in orderList"
                    :key="i"
                    :icon="'../assets/my/' + o.icon + '.png'"
                    :text="o.text"
                />
                <van-grid-item
                    icon="../assets/my/dingdan.png"
                    text="我的订单"
                />
            </van-grid>
        </div>
        <div class="card-item">
            <div class="card-item-content uni-flex uni-row">
                <div v-for="(item, index) in pocketList" :key="index">
                    <div class="text-bold">{{ item.count }}</div>
                    <div>{{ item.text }}</div>
                </div>
                <div>
                    <div class="icon-wrap">
                        <img src="../assets/my/kabao.png" mode="" />
                    </div>
                    <div>我的钱包</div>
                </div>
            </div>
        </div>
        <div class="card-item">
            <div class="card-item-content uni-flex uni-row">
                <div v-for="(item, index) in divList" :key="index">
                    <div class="text-bold">{{ item.count }}</div>
                    <div>{{ item.text }}</div>
                </div>
            </div>
            <div class="card-item-content uni-flex uni-row">
                <div v-for="(item, index) in serviceList" :key="index">
                    <div class="icon-wrap">
                        <img
                            :src="'../assets/my/' + item.icon + '.png'"
                            mode=""
                        />
                    </div>
                    <div>{{ item.text }}</div>
                </div>
            </div>
        </div>
        <div class="card-item">
            <div class="card-item-header">工具与服务</div>
            <div class="card-item-content">
                <div
                    class="card-item-block uni-flex uni-row"
                    v-for="(item, index) in otherServices"
                    :key="index"
                >
                    <div>
                        <div>
                            <img
                                :src="'../assets/my/' + item.icon + '.png'"
                                mode=""
                                style="width: 80upx;height: 80upx;vertical-align: top;"
                            />
                        </div>
                        <div>{{ item.name }}</div>
                    </div>
                    <div style="flex: 1;text-align: left;">
                        <div class="card-item-block-title">
                            {{ item.title }}
                        </div>
                        <div class="card-item-block-disc">{{ item.disc }}</div>
                    </div>
                    <button type="default" size="mini">去查看</button>
                </div>
            </div>
        </div>
        <div class="suggestion-title uni-flex uni-row">
            <div></div>
            <div>为你推荐</div>
            <div></div>
        </div>
        <div class="product-list-wrap">
            <div class="uni-product-list">
                <div
                    class="uni-product"
                    v-for="(product, index) in productList"
                    :key="index"
                >
                    <div class="image-div">
                        <img
                            v-if="renderImage"
                            class="uni-product-image"
                            :src="product.image"
                        />
                    </div>
                    <div class="uni-product-title">{{ product.title }}</div>
                    <div class="uni-product-price">
                        <text class="uni-product-price-favour"
                            >￥{{ product.originalPrice }}</text
                        >
                        <text class="uni-product-price-original"
                            >￥{{ product.favourPrice }}</text
                        >
                        <text class="uni-product-tip">{{ product.tip }}</text>
                    </div>
                </div>
            </div>
        </div>
        <div class="underlinetext" v-if="loadAll">已经到底啦！</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userinfo: null,
            user: {
                profile: "https://via.placeholder.com/70/ffffff/808080",
                nickname: "Kitty Wei",
                level: "钻石",
                tags: ["已实名", "查看信用"],
            },
            orderList: [
                { icon: "yinhangka", text: "待付款", padge: 0 },
                { icon: "rili", text: "待收货", padge: 1 },
                { icon: "xiaoxi", text: "待评价", padge: 6 },
                { icon: "anquan", text: "退换/售后", padge: 0 },
            ],

            divList: [
                { count: 108, text: "商品关注" },
                { count: 56, text: "店铺关注" },
                { count: 899, text: "喜欢的内容" },
                { count: 1600, text: "浏览记录" },
            ],
            pocketList: [
                { count: 1588, text: "虚拟币" },
                { count: 70, text: "优惠券" },
                { count: 100.9, text: "白条" },
                { count: 99, text: "礼品卡" },
            ],
            viewList: [
                { count: 108, text: "商品关注" },
                { count: 56, text: "店铺关注" },
                { count: 899, text: "喜欢的内容" },
                { count: 1600, text: "浏览记录" },
            ],
            serviceList: [
                { icon: "awake", text: "我的活动" },
                { icon: "hotel", text: "客户服务" },
                { icon: "car", text: "寄件服务" },
                { icon: "mic", text: "我的宝宝" },
            ],
            otherServices: [
                {
                    icon: "mic",
                    name: "小金库",
                    title: "你有一笔奖金，快来看看！你有一笔奖金，快来看看！",
                    disc: "参加早起打卡，瓜分5亿红包参加早起打卡，瓜分5亿红包",
                },
                {
                    icon: "hotel",
                    name: "基金",
                    title: "信托投资基金、公积金、保险基金",
                    disc: "为了某种目的而设立的具有一定数量的资金",
                },
            ],
            productList: [],
            renderImage: false,
            productPage: 0,
            loadAll: false,
        };
    },
    mounted() {
        if (sessionStorage.getItem("userinfo") != null) {
            this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
        }
    },
    methods: {
        logout() {
            this.userinfo = null; // 设置数据为未登录
            sessionStorage.removeItem("userinfo"); // 清除登录信息
        },

        loadData(action = "add") {
            const data = [
                {
                    image:
                        "https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg",
                    title: "Apple iPhone X 256GB 深空灰色 移动联通电信4G手机",
                    originalPrice: 9999,
                    favourPrice: 8888,
                    tip: "自营",
                },
                {
                    image:
                        "https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg",
                    title: "Apple iPad 平板电脑 2018年新款9.7英寸",
                    originalPrice: 3499,
                    favourPrice: 3399,
                    tip: "优惠",
                },
                {
                    image:
                        "https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product3.jpg",
                    title:
                        "Apple MacBook Pro 13.3英寸笔记本电脑（2017款Core i5处理器/8GB内存/256GB硬盘 MupxT2CH/A）",
                    originalPrice: 12999,
                    favourPrice: 10688,
                    tip: "秒杀",
                },
                {
                    image:
                        "https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product4.jpg",
                    title:
                        "Kindle Paperwhite电纸书阅读器 电子书墨水屏 6英寸wifi 黑色",
                    originalPrice: 999,
                    favourPrice: 958,
                    tip: "秒杀",
                },
                {
                    image:
                        "https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product5.jpg",
                    title:
                        "微软（Microsoft）新Surface Pro 二合一平板电脑笔记本 12.3英寸（i5 8G内存 256G存储）",
                    originalPrice: 8888,
                    favourPrice: 8288,
                    tip: "优惠",
                },
                {
                    image:
                        "https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product6.jpg",
                    title:
                        "Apple Watch Series 3智能手表（GPS款 42毫米 深空灰色铝金属表壳 黑色运动型表带 MQL12CH/A）",
                    originalPrice: 2899,
                    favourPrice: 2799,
                    tip: "自营",
                },
            ];

            if (action === "refresh") {
                this.productList = [];
                this.productPage = 0;
                this.loadAll = false;
            }

            data.forEach((item) => {
                this.productList.push(item);
            });
        },
    },
};
</script>

<style lang="less" scoped>
@page_bg_color: #f4f4f4;
@item-margin-bottom: 30px;
@item-margin-side: 20px;
@line-color: #f9f9f9;
@border-color: #aa833e;

.page-my {
    background-color: @page_bg_color;
}
.header {
    color: #fff;
    background-image: linear-gradient(
        40deg,
        rgb(210, 166, 95) 0%,
        rgb(239, 201, 142) 100%
    );
    padding: 50upx 30upx;
    margin-bottom: @item-margin-bottom;
    position: relative;
    .img-profile {
        margin-right: 30upx;
        image {
            width: 140upx;
            height: 140upx;
            border-radius: 50%;
            vertical-align: middle;
            border: 2px solid @border-color;
        }
    }
    .usertag {
        padding: 0 20upx;
        background-color: #cb9a5c;
        border-radius: 30upx;
        font-size: 24upx;
        margin-right: 20upx;
        border: 1px solid @border-color;
        line-height: 1.6;
    }
    .nikename {
        font-size: 30upx;
        margin-bottom: 10upx;
        .usertag {
            margin-left: 20upx;
            border: none;
            display: inline-block;
        }
    }
    .setting-btn {
        width: 60upx;
        height: 60upx;
        position: absolute;
        top: 40upx;
        right: 40upx;
    }
}
.card-item {
    background-color: #fff;
    border-radius: 20upx;
    margin: 0 @item-margin-side @item-margin-bottom @item-margin-side;
    text-align: center;
    .text-bold {
        font-weight: 900;
        font-size: 1.2em;
    }
    .icon-wrap {
        position: relative;
        image {
            width: 60upx;
            height: 60upx;
            vertical-align: top;
        }
        .badge {
            font-size: 20upx;
            width: 30upx;
            height: 30upx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-color: #dd524d;
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    .card-item-header {
        text-align: left;
        font-size: 1.1em;
        font-weight: 600;
        border-bottom: 1px solid @line-color;
        padding: 15upx 30upx;
    }
    .card-item-content {
        padding: 30upx;
        justify-content: space-between;
    }
    .card-item-block {
        border-bottom: 1px solid @line-color;
        padding: 30upx 0;
        align-items: center;
        &:first-child {
            padding-top: 0;
        }
        &:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }
        & > view:first-child {
            width: 100upx;
        }
        &-title {
            font-size: 1.1em;
            font-weight: 600;
        }
        &-title,
        &-disc {
            margin-left: 30upx;
            width: 340upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        button {
            width: 150upx;
            margin-right: 0;
        }
    }
}
.suggestion-title {
    justify-content: center;
    align-items: center;
    & > view:first-child,
    & > view:last-child {
        width: 100upx;
        height: 2upx;
        background-color: #ccc;
        margin: 0 20upx;
    }
}
.underlinetext {
    font-size: 24upx;
    color: #999;
    text-align: center;
    margin: 20upx;
}
</style>
